<template>
  <!-- 顶部 -->
  <div class="ls-header-container">
    <!-- 返回 -->
    <div class="back" @click="jumpFun" v-if="back">
      <span>返回</span>
    </div>
    <!-- 标题 -->
    <p class="header-title">地震应急指挥技术平台</p>
    <!-- 顶部时间 -->
    <div v-if="showDate" class="header-time">
        {{ dataTime.year }}年{{ dataTime.month }}月{{ dataTime.day }}日
        <span>{{ `${dataTime.hours}:${dataTime.minutes}:${dataTime.seconds}` }}</span>
        星期{{ weekData[dataTime.week] }}
      </div>
    </div>
</template>

<script setup>
const weekData = ['日', '一', '二', '三', '四', '五', '六'];
let timer_1 = null;
onMounted(() => {
  dateFormat();
  // 1秒刷新一次
  timer_1 = setInterval(() => {
    dateFormat();
  }, 1000);
});
onBeforeUnmount(() => {
  clearInterval(timer_1);
});
// 时间展示
let date = null;
const showDate = ref(false);
const dataTime = reactive({
  week: 0,
  year: 'YYYY',
  month: 'MM',
  day: 'DD',
  hours: '00',
  minutes: '00',
  seconds: '00',
});
function dateFormat() {
  date = new Date();
  dataTime.week = date.getDay();
  dataTime.year = date.getFullYear();
  dataTime.month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
  dataTime.day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  dataTime.hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
  dataTime.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
  dataTime.seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  showDate.value = true;
}

//返回
import { ref, defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  back: Boolean,
  to: String,
});



const router = useRouter();
const jumpFun = (e) => {
  router.push(props.to);
};
</script>
<style lang="scss" scoped>
.ls-header-container {
  width: 100%;
  height: 10%;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 18px;
  .header-time {
    margin-right: 15px
  }
  .back {
    cursor: pointer;
    margin-left: 15px;
  }
  .header-title {
    font-size: 26px;
  }
}
</style>
